<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 400px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            @onChange="onChange"
        />
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth";

export default {
    components: { Editor, Toolbar },
    props: {
        /* 编辑器的内容 */
        value: {
            type: String,
        },
    },
    data() {
        return {
            editor: null,
            html: '',
            toolbarConfig: { },
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    // 配置上传图片
                    uploadImage: {
                        //server必须要配置正确
                        server: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
                        maxFileSize: 10* 1024 * 1024, // 10M
                        // 最多可上传几个文件，默认为 100
                        maxNumberOfFiles: 10,
                        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                        allowedFileTypes: ['image/*'],
                        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                        fieldName: 'file',
                        headers: {
                            Authorization: "Bearer " + getToken(),
                        },
                        // 将 meta 拼接到 url 参数中，默认 false
                        metaWithUrl: false,
                        // 跨域是否传递 cookie ，默认为 false
                        withCredentials: false,
                        // 超时时间，默认为 10 秒
                        timeout: 5 * 1000, // 5 秒
                        customInsert(res, insertFn) { // JS 语法
                            // res 即服务端的返回结果
                            if (res.code == 200) {
                                // 从 res 中找到 url alt href ，然后插图图片
                                insertFn(`${process.env.VUE_APP_BASE_API}${res.fileName}`, '', `${process.env.VUE_APP_BASE_API}${res.fileName}`);
                            } else {
                                //this.$message.error("图片插入失败");
                                console.log('图片上传失败:', res.msg);
                            }
                        },
                        // 小于该值就插入 base64 格式（而不上传），默认为 0
                        base64LimitSize: 5 * 1024, // 5kb
                        // 上传之前触发
                        onBeforeUpload(file) {    // JS 语法
                            // file 选中的文件，格式如 { key: file }
                            // 可以 return
                            // 1. return file 或者 new 一个 file ，接下来将上传
                            // 2. return false ，不上传这个 file
                            return file;
                        },
                        // 单个文件上传失败
                        onFailed(file, res) {           // JS 语法
                            //this.$message.error("图片插入失败");
                            console.log(`${file.name} 上传失败`, res.msg);
                        },
                        // 上传错误，或者触发 timeout 超时
                        onError(file, err, res) {               // JS 语法
                            //this.$message.error("图片插入出错");
                            console.log(`${file.name} 上传出错`, err, res.msg);
                        },
                    },
                    uploadVideo: {
                        // 单个文件的最大体积限制，默认为 10M
                        maxFileSize: 500 * 1024 * 1024, // 500M
                        // 最多可上传几个文件，默认为 5
                        maxNumberOfFiles: 3,
                        // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
                        allowedFileTypes: ['video/*'],
                        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                        fieldName: 'file',
                        // 将 meta 拼接到 url 参数中，默认 false
                        metaWithUrl: false,
                        // 自定义增加 http  header
                        headers: {
                            Authorization: "Bearer " + getToken(),
                        },
                        // 跨域是否传递 cookie ，默认为 false
                        withCredentials: true,
                        // 超时时间，默认为 30 秒
                        timeout: 30 * 1000, // 30 秒
                        // 视频不支持 base64 格式插入
                        // 自定义插入视频
                        customInsert(res, insertFn) {                  // JS 语法
                            // res 即服务端的返回结果
                            if (res.code == 200) {
                                // 从 res 中找到 url poster ，然后插入视频
                                insertFn(`${process.env.VUE_APP_BASE_API}${res.fileName}`, '');
                            } else {
                                //this.$message.error("图片上传失败");
                                console.log('视频上传失败:', res.msg);
                            }
                            
                        },
                        // 上传之前触发
                        onBeforeUpload(file) {    // JS 语法
                            // file 选中的文件，格式如 { key: file }
                            // 可以 return
                            // 1. return file 或者 new 一个 file ，接下来将上传
                            // 2. return false ，不上传这个 file
                            return file;
                        },
                        // 单个文件上传失败
                        onFailed(file, res) {           // JS 语法
                            console.log(`视频 ${file.name} 上传失败`, res.msg);
                        },
                        // 上传错误，或者触发 timeout 超时
                        onError(file, err, res) {               // JS 语法
                            console.log(`视频 ${file.name} 上传出错`, err, res.msg);
                        },
                    },
                    codeSelectLang: {
                        // 代码语言
                        codeLangs: [
                            { text: 'CSS', value: 'css' },
                            { text: 'HTML', value: 'html' },
                            { text: 'XML', value: 'xml' },
                            // 其他
                        ]
                    }
                },
            },
            mode: 'default', // or 'simple'
        }
    },
    model:{
      prop: "value",
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        onChange(editor){ 
            // 通过$emit触发（model内定义）事件，将内部值传递给给父组件
            this.$emit('input', editor.getHtml());
            //this.$emit('saveText', editor.getText());
        }
    },
    watch: {
        value: {
            handler(val) {
                if (val !== this.html) {
                    this.html = val === null ? "" : val;
                }
            },
            immediate: true,
        },
    },
    mounted() {
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>